page {
  height: 100%;
  width: 100%;
  background-color: #F8F8F8;
}

.container {
  height: 100%;
  width: 100%;
}

/* 主题色 */
.main-color {
  color: #ff79f2;
}

.white-color {
  color: #FFFFFF;
}

.black-color {
  color: #333333;
}

.normal-color {
  color: #666666;
}

.gray-color {
  color: #999999;
}

/* 背景 */
.bg-white-color{
  background-color: #FFFFFF;
}

.bg-hover-color{
  background-color: #BBBBBB!important;
}

/* flex布局 */
.d-flex{
  display: flex;
}

.flex-row{
  flex-direction: row;
}

.j-start{
  justify-content: flex-start;
}

.j-center{
  justify-content:center;
}

.j-end{
  justify-content: flex-end;
}

.j-sb{
  justify-content: space-between;
}

.j-sa{
  justify-content: space-around;
}

.a-start{
  align-items: flex-start;
}

.a-center{
  align-items: center;
}

.a-end{
  align-items: flex-end;
}

.a-stretch{
  align-items: stretch;
}

.a-c-center{
  align-content: center;
}

.a-self-start{
  align-self: flex-start;
}

.a-self-end{
  align-self: flex-end;
}

.flex-shrink{
  flex-shrink: 0;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

/* 边框 */
.u-border-radius{
  border-radius: 10rpx;
}

.u-border-radius-big{
  border-radius: 30rpx;
}

.u-border-radius-lg{
  border-radius: 60rpx;
}

.box-content{
  box-sizing: content-box;
}

/* 外边距 */
.mx-5{
  margin-left: 5rpx;
  margin-right: 5rpx;
}

.mx-10{
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.mx-20{
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.mx-30{
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.my-5{
  margin-top: 5rpx;
  margin-bottom: 5rpx;
}

.my-10{
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.my-20{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.my-30{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.u-m-t-5{
  margin-top: 5rpx;
}

.u-m-t-10{
  margin-top: 10rpx;
}

.u-m-t-20{
  margin-top: 20rpx;
}
.u-m-t-30{
  margin-top: 30rpx;
}

.u-m-b-5{
  margin-bottom: 5rpx;
}

.u-m-b-10{
  margin-bottom: 10rpx;
}

.u-m-b-20{
  margin-bottom: 20rpx;
}

.u-m-b-30{
  margin-bottom: 30rpx;
}

.u-m-b-40{
  margin-bottom: 40rpx;
}

.u-m-l-5{
  margin-left: 5rpx;
}

.u-m-l-10{
  margin-left: 10rpx;
}

.u-m-l-20{
  margin-left: 20rpx;
}

.u-m-l-30{
  margin-left: 30rpx;
}

.u-m-r-5{
  margin-right: 5rpx;
}

.u-m-r-10{
  margin-right: 10rpx;
}

.u-m-r-15{
  margin-right: 15rpx;
}

.u-m-r-20{
  margin-right: 20rpx;
}

.u-m-r-30{
  margin-right: 30rpx;
}



/* 内边距 */
.px-5{
  padding-left: 5rpx;
  padding-right: 5rpx;
}

.px-10{
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.px-20{
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.px-30{
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.py-5{
  padding-top: 5rpx;
  padding-bottom: 5rpx;
}

.py-10{
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.py-20{
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.py-30{
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

.b-s-2{
  border: 2px #ffaaff solid;
}

.b-a-r-10{
  border-radius: 20rpx;
  /* border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx; */
}


/* 文字 */
/* 删除线 */
.line-through{
  text-decoration: line-through;
}
/* 加粗 */
.font-weight{
  font-weight: bold;
}
/* 块元素 */
.d-block{
  display: block;
}
/* 行元素 */
.d-inline{
  display: inline;
}
/* 两端对齐 */
.t-justify{
  text-align: justify;
}

.u-font-10{
  font-size: 10px;
}

.u-font-11{
  font-size: 11px;
}

.u-font-12{
  font-size: 12px;
}
.u-font-13{
  font-size: 13px;
}
.u-font-14{
  font-size: 14px;
}
.u-font-15{
  font-size: 15px;
}
.u-font-16{
  font-size: 16px;
}
.u-font-17{
  font-size: 17px;
}
.u-font-18{
  font-size: 18px;
}

.u-font-19{
  font-size: 19px;
}
.u-font-20{
  font-size: 20rpx;
}
.u-font-21{
  font-size: 21rpx;
}
.u-font-22{
  font-size: 22rpx;
}
.u-font-23{
  font-size: 23rpx;
}
.u-font-24{
  font-size: 24rpx;
}
.u-font-25{
  font-size: 25rpx;
}
.u-font-26{
  font-size: 26rpx;
}
.u-font-27{
  font-size: 27rpx;
}
.u-font-28{
  font-size: 28rpx;
}
.u-font-29{
  font-size: 29rpx;
}
.u-font-30{
  font-size: 30rpx;
}
.u-font-31{
  font-size: 31rpx;
}
.u-font-32{
  font-size: 32rpx;
}
.u-font-33{
  font-size: 33rpx;
}
.u-font-34{
  font-size: 34rpx;
}
.u-font-35{
  font-size: 35rpx;
}
.u-font-36{
  font-size: 36rpx;
}
.u-font-37{
  font-size: 37rpx;
}
.u-font-38{
  font-size: 38rpx;
}
.u-font-39{
  font-size: 39rpx;
}
.u-font-40{
  font-size: 40rpx;
}


/* 宽高 */
.w-100{
  width: 100%;
}

.w-50{
  width: 50%;
}

.h-100{
  height: 100%;
}

.h-50{
  height: 50%;
}

/* 图片大小 */
.img-345{
  width: 345rpx;
  height: 345rpx;
}

.img-160{
  width: 160rpx;
  height: 160rpx;
}

.img-80{
  width: 80rpx;
  height: 80rpx;
}


/* 阴影 */
.shadow{
  box-shadow: 0 0 15rpx #999999;
}

/* 固定位置 */
.p-fixed{
  position: fixed!important;
}

.left-0{
  left: 0px;
}

.right-0{
  right: 0px;
}

.top-0{
  top: 0px;
}

.bottom-0{
  bottom: 0px;
}

/* 浮动 */
.f-l{
  float: left;
}



